<template>
    <div class="Discuss">
        <!---->
        <ul class="msgList" v-if="comment_list.length>0">
            <!--列表-->
            <li class="depth-1 clearfix animated fadeIn" 
                v-for="(item,index) in comment_list" 
                :style="{animationDelay:delay(index)}" 
                :key="index"
                v-if="comment_list.length>0">
                <!--头像-->
                <img :src="item.member_avatar" alt="" class="msgHead">
                <!--一层回复-->
                <div class="msgBox">
                    <h3 class="name">{{item.comment_name}}</h3>
                    <p class="msg">{{item.comment_content}}</p>
                    <div class="time">{{item.add_time}}<span class="del"
                                                             v-if="data.intro_lession.is_buy===1&&item.show==='0'" 
                                                             @click.stop="reply(item)">回复</span><span class="del" v-if="item.show==='1'" @click="delConfirm(item,index,-1)">删除</span></div>
                    <!--二层回复-->
                    <ul class="replyBox" v-if="item.reply.length>0">
                        <li class="animated flipInY" v-for="(item2,index2) in item.reply" :style="{animationDelay:delay(index2)}" @click.stop="reply(item2)" :key="index2"><b>{{item2.comment_name}}</b>&#8197;回复&#8197;<b>{{item2.reply_name}}</b>：{{item2.comment_content}} <span class="del" v-if="item2.show==='1'" @click="delConfirm(item2,index,index2)">删除</span></li>
                    </ul>
                </div>
                <!---->
            </li>
            <!--加载更多-->
            <li class="loadmore" v-show="comment_list.length>=prePage" style="padding-top:.2rem">
                <!--加载更多-->
                <p class="moreBtn animated fadeIn" v-if="!noData" >
                    <el-button 
                               type="primary" 
                               :loading="!loadMoreState" 
                               size="mini" 
                               @click="loadMoreData"
                               :disabled="!loadMoreState">{{loadMoreText}}</el-button>
                </p>
                <!--没有更多-->
                <fieldset class="noMore animated fadeIn" v-if="noData" >
                    <legend align="center" class="noMoreText">没有更多了</legend>
                </fieldset>
            </li>
        </ul>
        <!--无数据-->
        <div class="nodataCus animated fadeIn" v-if="comment_list.length<=0">
            <!--
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wushuju"></use>
</svg>
-->
            <img src="../../assets/huawa-off.png" alt="" />
            <p>暂无数据..</p>
        </div>
    </div>
</template>

<script>
    //导入组件
    import LoadMore from '@/components/smallCom/LoadMore'
    export default {
        name: 'Discuss',
        props:['data'],
        data () {
            return {
                comment_list:[],//评论列表

                firstReplyShow:false,//一级回复框是否显示
                secondReplyShow:false,//二级回复框是否显示

                /*分页*/
                loadMoreState:true,//加载更多按钮状态
                loadMoreText:'加载更多',//加载更多文本
                currentPage:2,//当前页
                prePage:6,//每页显示几条数据
                noData:false,//是否还有数据
            }
        },
        mounted(){
            this.comment_list = this.data.comment_list;
        },
        watch: {  
            /*'data.comment_list': {  
                handler(newValue, oldValue) {    
                    this.comment_list = newValue;
                },  
                deep: true  
            }*/  
        },
        methods:{
            //回复事件 通知父组件
            reply(item){
                if(this.data.intro_lession.is_buy == 0)return
                this.$emit('childReply',item)
            },
            //删除确认
            delConfirm(item,index,index2){
                this.$confirm('您要删除此条信息吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.Posthttp('/?method=flower.user.deleteComment',{member_id:this.getMemberId(),comment_id:item.comment_id},(res)=>{
                        this.loading = false;
                        if(JSON.parse(res.bodyText).status ===1){//删除成功后本地数据改动

                            //通知父组件改变评论总数
                            this.$emit('commentNum');

                            if(index2 === -1){//一层数组删除
                                this.comment_list.splice(index,1);
                            }else{//二层数组删除
                                this.comment_list[index].reply.splice(index2,1); 
                            }

                        }else{
                            this.$message.warning(JSON.parse(res.bodyText).msg); 
                        }
                    });
                }).catch(() => {
                    //do nothing         
                });;
            },

            //加载更多
            loadMoreData(){
                this.loadMoreState = false;
                this.loadMoreText = '加载中..';
                this.Posthttp('/?method=flower.index.commentlist',{member_id:this.getMemberId(),lession_id:this.data.intro_lession.lession_id,page:this.currentPage},(res)=>{
                    this.loadMoreState = true;
                    this.loadMoreText = '加载更多';
                    let Dlength = JSON.parse(res.bodyText).data.comment_list.length;
                    if(Dlength<1){
                        this.noData = true; 
                    }else{
                        this.noData = false;
                        this.currentPage++;
                        this.comment_list = this.comment_list.concat(JSON.parse(res.bodyText).data.comment_list);
                        this.$emit('updComment',this.comment_list);
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Discuss {
        .msgList{
            padding: 0 .2rem .5rem;
            position: relative;
            /*列表*/
            .depth-1{
                color: #777777;
                padding: .4rem 0 .3rem;
                border-bottom: 1px solid #e4e4e4;
                &:last-child{
                    border-bottom: 0;
                }
                /*头像*/
                .msgHead{
                    float: left;
                    width: .86rem;
                    height: .86rem;
                    border-radius: 100%;
                }
                /*一层回复*/
                .del{
                    color: #eb5b29;
                    margin-left: .2rem;
                }
                .msgBox{
                    margin-left: .86rem;
                    padding-left: .2rem;
                    .name{
                        font-weight: 600;
                        font-size: .26rem;
                        color: #333;
                    }
                    .msg{
                        margin-top: .18rem;
                        line-height: .36rem;
                    }
                    .time{
                        margin-top: .2rem;
                    }
                }
                /*一层回复输入框*/
                .relpy-input{
                    margin: .2rem 0 .4rem;
                    width: 100%;
                    height: .6rem;
                    position: relative;
                    input{
                        width: 87%;
                        height: 100%;
                        padding: 0 .2rem;
                        border: 1px solid #e4e4e4;
                        outline: none;
                        transition: all .5s;
                        &:focus{
                            border: 1px solid #eb5b29;
                        }
                    }
                    .sendIcon{
                        width: 12%;
                        height: .6rem;
                        line-height: .6rem;
                        text-align: center;
                        background: #eb5b29;
                        position: absolute;
                        font-size: .36rem;
                        color: #fff;
                        right: 0rem;
                        top: 0;
                        vertical-align: middle;
                    }
                }
                /*二层回复*/
                .replyBox{
                    margin-top: .2rem;
                    padding: .28rem .16rem;
                    background-color: #f8f8f8;
                    border: 1px solid #dbdbdb;
                    li{
                        line-height: .36rem;
                        margin-bottom: .24rem;
                        &:last-child{
                            margin-bottom: 0;
                        }
                        b{
                            color: #1f83e0;
                            font-weight: 600;
                        }
                    }
                }
            }
        }
        /*无数据*/
        .nodataCus{
            text-align: center;
            color: #999;
            font-size: .28rem;
            margin-top: .3rem;
            .icon{
                font-size: 2rem;
            }
        }
    }
</style>
